import Form from "antd/es/form/Form";
import TextArea from "antd/es/input/TextArea";
import Radio from "antd/es/radio/radio";
import './ExamItem.scss'
import { useEffect, useState } from "react";

export default function ExamItem({ info, onChange }) {
    const [inputList, setInputList] = useState([]);
    const [choicesList, setChoicesList] = useState([]);
    const [blankList, setBlankList] = useState([]);


    useEffect(() => {
        onChange(info.key,inputList.join(' '));
    }, [inputList])

    const handleSelect = (e) => {
        onChange(info.key,e.target.value);
    }

    const examLabel = <div
        className="exam-label"
    >
        <span>
            {`${info.key + 1}.  `}
        </span>
        <span>
            {info.exe_name}
        </span>
    </div>;


    useEffect(() => {

        if (info.exe_type === '选择  ') {

            setChoicesList(Object.keys(info.exe_choices).map(ele => ({
                key: ele,
                element: info.exe_choices[ele]
            })))

        }

        // console.log(choicesList);

        if (info.exe_type === "填空  ") {
            setInputList(Array(info.exe_blank_num).fill(''));
            setBlankList(Array(info.exe_blank_num).fill(null).map((e,i)=>i));
        }
    }, []);



    return (
        <>
            <Form.Item
                className="exam-item"
                label={examLabel}
                name={info.exrcise_id}
                rules={[
                    {
                        required: true,
                        message: '请填写此空',
                    },
                ]}
            >
                {
                    info.exe_type === '选择  ' ?
                        (<Radio.Group
                            className="exam-radio-group"
                            onChange={handleSelect}
                        >
                            {choicesList.map((ele, index) => <Radio
                                className="exam-radio"
                                key={index}
                                value={ele.key}
                            >
                                {`${ele.key}: ${ele.element}`}
                            </Radio>)}
                        </Radio.Group>)
                        : <>
                            {blankList.map(i => <TextArea
                                key={i}
                                name={i}
                                className="exam-input"
                                placeholder={`第${i + 1}空作答区域`}
                                autoSize
                                onChange={(e) => {
                                    setInputList(inputList.map((ele, index) => {
                                        if (index === i) return e.target.value;
                                        return ele;
                                    }))
                                }}
                                value={inputList[i]}
                            />)}
                        </>
                }
            </Form.Item>
        </>
    )
}